<template>
  <div class="tabs">
      <!-- 等于首页的不给删除 -->
    <el-tag
      :key="tag.name"
      size="small"
      v-for="tag in tags"
      :closable="tag.name !== 'home'" 
      :disable-transitions="false"
      @close="handleClose(tag)"
      @click="changMenu(tag)"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
    >{{tag.label}}</el-tag>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex';
export default {
  data() {
    return {
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
    };
  },
  computed:{
    ...mapState({
      //通过一个箭头函数来拉取资源 箭头函数 拿到数据模块 state下的tab模块 
      tags : state => state.tab.tagList
    })
  },
  methods: {
      //数据的联动是通过vuex绑定的 删除操作 通过commit操作veux数据
      ...mapMutations({
        //获取方法就是这样直接拿字符串
        close:'closeList'
      }),
    handleClose(tag) {
        this.close(tag)
    },

    //通过vuex改变跳转
    changMenu(item){
      this.$router.push({name:item.name});
      //为了全体联动都统一起飞
      this.$store.commit('selectMenu',item)
    }
  },
};
</script>

<style lang="scss" scoped>
.tabs {
    padding: 20px;
    .el-tag {
        margin-right: 15px;
        cursor: pointer;

    }
}
// //可更改样式
// .el-tag--dark {
//   background: red;
//     border-color: red;
//     color: #fff;

// }
</style>